<template>
  <el-card>
    <!-- 头部 -->
    <!-- 命名插槽 -->
    <template v-slot:header>
      <h1 class="card-title">用户管理</h1>
    </template>

    <!-- 内容 -->
    <!-- 默认插槽 -->
    <div>
      <router-link to="/user/save" class="user-save-btn"
        ><el-button type="primary">添加</el-button></router-link
      >
      <el-button type="danger">批量删除</el-button>

      <!-- 
        el-table 表格
          data 表格要展示的数据
          border 带边框
       -->
      <el-table :data="users" border v-loading="loading" class="user-table">
        <!-- 
          el-table-column 决定表格有多少列
            type="selection" 多选
            type="index"     序号
            prop   决定当前列显示data数据的哪个属性的值
              prop="name"  显示data数据中name属性的值
         -->
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column label="序号" type="index" width="50">
        </el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="nickname" label="用户昵称"> </el-table-column>
        <el-table-column label="创建时间">
          <!-- 
            el-table-column 如果需要使用当前行的数据，
              可以通过作用域插槽传递
                $index 当前数据的下标
                row    当前行整个数据
           -->
          <template v-slot="{ row }">
            {{ formatTime(row.createdTime) }}
          </template>
        </el-table-column>
        <el-table-column label="更新时间">
          <template v-slot="{ row }">
            {{ formatTime(row.updatedTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-tooltip
              class="update-btn-wrap"
              effect="dark"
              content="更新"
              placement="top"
            >
              <router-link :to="{ name: 'UpdateUser', params: { id: row.id } }">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  size="mini"
                ></el-button>
              </router-link>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除" placement="top">
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 
        el-pagination 分页器
          current-page 当前页码（当前是第几页）
          page-sizes   可以选择的每页条数有哪些
          page-size    默认每页条数
          layout       分页器要是用哪些内容
            total 总数
            sizes 选择的每页条数
            prev  往左翻页
            next  往右翻页
            jumper 跳转某页
            pager  分页
       -->
      <el-pagination
        :current-page="1"
        :page-sizes="[3, 6, 9, 12, 15]"
        :page-size="3"
        layout="prev, pager, next, jumper, sizes, total"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
import { mapState, mapActions } from "vuex";
import dayjs from "dayjs";

export default {
  name: "User",
  data() {
    return {
      // tableData: [
      //   {
      //     username: "zhangsan",
      //     nickname: "xiaosan",
      //     createdTime: Date.now(),
      //     updatedTime: Date.now(),
      //   },
      // ],
      page: 1,
      limit: 3,
      loading: false,
    };
  },
  computed: {
    ...mapState(["users", "total"]),
  },
  methods: {
    ...mapActions(["getUsersList"]),
    formatTime(time) {
      return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
    },
    // 当每页条数发生变化时，触发的回调
    handleSizeChange(limit) {
      this.limit = limit;
      this.getUsers(this.page, limit);
    },
    // 当页码发生变化时，触发的回调
    handleCurrentChange(page) {
      this.page = page;
      this.getUsers(page, this.limit);
    },
    async getUsers(page, limit) {
      this.loading = true;
      // actions返回值是一个promise对象
      // 并不是promise对象是成功状态，内部事情就做完了
      // 使用async await语法，要等待请求完成，
      // 此时actions返回值就是async函数的返回值
      // async函数一定会返回一个promise
      // 当async内部所有代码都成功执行完了，返回的promise就是成功状态
      // 当async内部代码只要有一个失败了，返回的promise就是失败状态
      await this.getUsersList({ page, limit });
      // 请求是异步，默认是不等的，所以：请求还未完成，loading已经是false
      // 解决：等请求完成才切换loading
      this.loading = false;
    },
  },
  mounted() {
    const { page, limit } = this;
    this.getUsers(page, limit);
  },
};
</script>

<style>
.user-table {
  margin: 10px 0;
}
.el-pagination {
  display: flex;
}
.el-pagination__jump {
  flex: 1;
}
.user-save-btn {
  margin-right: 20px;
}
.update-btn-wrap {
  margin-right: 20px;
}
</style>